<template>
  <div class="content">
    <div class="bgc">
      <img src="https://qnhyd.laigl.com/4b58216f9d8b7b0ad4a646fab1a340d0.png" alt="" />
    </div>
    <div class="top_bgc">
      <img src="https://qnhyd.laigl.com/cd83d710633109f1235e763e992fdb94.png" alt="" />
    </div>
    <div class="news_list">
      <scroller
      class="home-scroller"
      ref="scroller"
      :probe-type="3"
      @pullingUp="pullingUp">
        <div
        class="news"
        @click="goPunchClock(item.id,item.name)"
        v-for="(item, index) in newDetail"
        :key="index"
      >
        <img :src="item.img" alt="" />
        <p>{{ item.name }}</p>
        <div>
          <div class="serial">
            <div class="triangle">
              <div></div>
            </div>
            <div class="serial_nu">
               <p>{{item.name}}</p>
              <!-- 第{{changeNumToHan(item.id)}}期({{ index + 1 }}/{{ newDetail.length }}) -->
            </div>
          </div>
        </div>
      </div>
      </scroller>
      

    </div>
  </div>

  <main-tab-bar></main-tab-bar>
</template>

<script>
import { Toast } from 'vant';
import MainTabBar from "../../components/content/MainTabBar/MainTabBar.vue";
import { request } from "../../network/request";
import scroller from "/@/components/commont/scroller/Scroller.vue"
export default {
  data() {
    return {
      page: 1,
      newDetail: [],
    };
  },
  methods: {
    goPunchClock(id,name) {
      this.$router.push({
        path: "/punchClock",
        query:{
            id: id,
            name:name
        }
      });
    },
    async getnewDetail() {
      const res = await request({
        url: "/v1.index/getbook",
        data: {
          page: this.page,
        },
      });
      if(res.data.rows.length!==0){
        this.newDetail.push(...res.data.rows);
        this.page+=1;
      }else{
        Toast("没有更多了")
      }
      this.$refs.scroller.finishPullUp()
      
    },
    pullingUp(){
      this.getnewDetail()
    },
    // 将index转化为多少期
    changeNumToHan(num) {
      var arr1 = new Array(
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九"
      );
      var arr2 = new Array(
        "",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿"
      ); //可继续追加更高位转换值
      if (!num || isNaN(num)) {
        return "零";
      }
      var english = num.toString().split("");
      var result = "";
      for (var i = 0; i < english.length; i++) {
        var des_i = english.length - 1 - i; //倒序排列设值
        result = arr2[i] + result;
        var arr1_index = english[des_i];
        result = arr1[arr1_index] + result;
      }
      //将【零千、零百】换成【零】 【十零】换成【十】
      result = result.replace(/零(千|百|十)/g, "零").replace(/十零/g, "十");
      //合并中间多个零为一个零
      result = result.replace(/零+/g, "零");
      //将【零亿】换成【亿】【零万】换成【万】
      result = result.replace(/零亿/g, "亿").replace(/零万/g, "万");
      //将【亿万】换成【亿】
      result = result.replace(/亿万/g, "亿");
      //移除末尾的零
      result = result.replace(/零+$/, "");
      //将【零一十】换成【零十】
      //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
      //将【一十】换成【十】
      result = result.replace(/^一十/g, "十");
      return result;
    },
  },
  mounted() {
    this.getnewDetail();
  },
  components: {
    MainTabBar,
    scroller
  },
};
</script>

<style  scoped>
.home-scroller{
  height: calc(100vh - 157px);
  
}
.content {
  position: relative;
}
.bgc {
  position: fixed;
  width: 100vw;
  /* left: 0;
      right: 0; */
}
.bgc img {
  width: 100%;
  height: 100vh;
}
.top_bgc {
  position: fixed;
  top: -1.867vw;
  z-index: 99999;
  transform: translateZ(2px);
}
.top_bgc img {
  width: 100vw;
}
.news_list {
  position: absolute;
  width: 88.8vw;
  margin: 0 auto;
  left: 5.6vw;
  right: 5.6vw;
  top: 24vw;
  padding-bottom: 24vw;
  /* background-color: #fff; */
}
.news {
  position: relative;
  background-color: #fff4eb;
  padding: 2.133vw 2.667vw 4.533vw 2.667vw;
  height: 49.867vw;
  margin-bottom: 4.533vw;
}
.news img {
  width: 83.467vw;
  height: 42.133vw;
}
.news p {
  font-size: 4vw;
  font-weight: bold;
  margin: 0;
  line-height: 10.667vw;
  overflow:hidden;
  text-overflow:ellipsis; /* 加省略号 */
  white-space:nowrap; /* 强制不换行 */
}
.serial {
  position: absolute;
  top: 0;
  left: -2.133vw;
}
.serial_nu {
  width: 22.667vw;
  height: 7.733vw;
  background-color: #bd1d21;
  text-align: center;
  padding: 0 1.333vw;
}
.serial_nu p{
  color: #fff;
  font-size: 3.2vw;
  line-height: 7.733vw;
  overflow:hidden;
  text-overflow:ellipsis; /* 加省略号 */
  white-space:nowrap; /* 强制不换行 */
}
.triangle {
  width: 2.133vw;
  height: 2.133vw;
  /* background-color: #bd1d21;
    transform: preserve-3d;
    transform: rotateY(70deg); */
}
.triangle div {
  border-width: 1.067vw;
  border-style: solid;
  border-color: transparent #bd1d21 #bd1d21 transparent;
}
</style>